<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script >
$(document).ready(function() {
//Edit My Basic Info Btn click will trigger this 
            $('#editMyBasicInfoBtn').click(function(){
                 $(this).parents('form') // For each element, pick the ancestor that's a form tag.
                       .find(':input') // Find all the input elements under those.
                       .each(function(i) {
                        $(this).prop("readonly",false);
                        $(this).removeClass("readonly");
                });
                 
            });
});
</script>
<style type="text/css">
body{
color: black;
 
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
 
font: 9px Verdana,"Lucida Grande",Tahoma,Geneva,Arial,Helvetica,sans-serif;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
 
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td.label {
padding: 0.1em 0.5em;
white-space: nowrap;
line-height: 100%;
background-color:#CCCCCC;
}
 
td, th {
display: table-cell;
vertical-align: inherit;
}
td.value {
padding: 0.1em 0.5em;
white-space: nowrap;
line-height: 120%;
}
 
.readonly{
border:none; 
background-color:inherit
}
</style>
</head>
<body>
<h2>Basic Information</h2>
<form action="" method="post" id="myBasicInfo">
<table cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td class="label">Employee ID:</td>
      <td class="value">
      <input type="text" name="empID" name="empID" value="21233333" size="40" maxlength="1000"  readonly="readonly"  class="readonly" /></td>
      <td class="label">Employee Name:</td>
      <td class="value"><input type="text" name="empName" name="empName" value="Henry Poter" size="40" maxlength="1000" class="readonly" /></td>
    </tr>
    <tr>
      <td class="label">Gender:</td>
      <td class="value"><input type="text" name="gender" value="Male" size="40" maxlength="1000"  readonly="readonly" class="readonly"></td>
    
      <td class="label">Birthday:</td>
      <td class="value"><input type="text" name="birthday" value="1988-08-08" size="40" maxlength="1000" class="readonly"></td>
    </tr>
     
    <tr>
      <td class="label">Email:</td>
      <td class="value"><input type="text" name="email" value="admin@phpcode8.com" size="40" maxlength="1000"  readonly="readonly" class="readonly"></td>
   
      <td class="label">Mobile Phone:</td>
      <td class="value"><input type="text" name="mobile" value="" size="40" maxlength="1000" class="readonly"></td>
    </tr>
    <tr>
      <td ></td>
      <td class="value"><input type="button" value="Edit" id="editMyBasicInfoBtn" name="editMyBasicInfoBtn" /> <input type="submit" value="Save" /><input type="reset" value="Cancel"  /></td>
      <td ></td>
      <td ></td>
    </tr>
  </tbody>
</table>
</form>
</body>
</html>